<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Class 与 Style 绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
</head>
<body>

<h3>绑定 HTML Class:</h3>
<div v-bind:class="classObject">
    abc
</div> 



<div class="app1">
    <div class="otherClass" :class="[class1,class2]">
        我是文字
    </div> <!--法二:用数组的方式实现-->
</div>



<h3>用在组件上:</h3>

<div id="components-demo">
    <my-component class="baz boo"></my-component>
</div>
<div id="components-demo1">
    <my-component v-bind:class="{ active: isActive }"></my-component>
</div>


<h3>绑定内联样式:</h3>
<div id='app2'>
    <div v-bind:style="styleObject">
       绑定内联样式 
    </div>
</div>


<h1 v-show="">Hello!</h1>

</body>
<script>
//<h3>绑定 HTML Class:</h3>

var vm = new Vue({
    
    data: {
      classObject: {
        active: false,
        'text-danger': false
      }
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
});


var vm = new Vue({
    el:".app1",
    data: {
        class1: 'name1',
        class2: 'name2',
        isShow: false
    }
});


//<h3>用在组件上:</h3>
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
new Vue({ el: '#components-demo' })


var vm = new Vue({
    el: '#components-demo1',
    data:{
        isActive: 'truthy',
    }
});


//<h3>绑定内联样式:</h3>
var vm = new Vue({
    el: '#app2',
    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
});

</script>
</html>